<template>
	<view class="">
		<view v-if="nowid==1">
			<!-- <image class="w-1 absolute-0" style="height: 524rpx;" :src="$path + '/tab1/hbg.png'" mode=""></image> -->
			<view class="top-bg w-1 absolute-0">

			</view>
			<view class="sticky o-h">
				<up-navbar title="共享电工" placeholder leftIconSize="0" bgColor="#007674" :autoBack="false">
					<template #center>
						<view class="c-ff bold fs-36">共享电工</view>
					</template>
				</up-navbar>
				<image class="w-1 absolute-0" style="height: 524rpx;" :src="$path + '/tab1/hbg.png'" mode=""></image>
			</view>
			<view class="w-1 relative fl-s-c">
				<view class="sbox fr-s-c p-r-30" @click="$u.route('/pages/index/Search/Search')">
					<image style="width: 32rpx; height: 32rpx;" :src="$path + '/tab1/search.png'" mode=""></image>
					<text style="color: #BFC0C4;" class="fs-28 m-l-20">搜索</text>
				</view>
				<view class="w-1 p-r-30 relative m-t-20">
					<up-swiper @click="clickBannr" keyName="image" bgColor="transparent" circular height="300rpx"
						width="686rpx" radius="20rpx" :list="banners"></up-swiper>
				</view>


				<view class="wbox m-t-20">
					<view class="w-1 fr-b-c" style="padding: 28rpx; padding-bottom: 15rpx;">
						<text class="c-00 fs-32 bold">常用服务</text>
						<view class="fr-s-c" @click="getclist">
							<image :src="$path + '/tab1/re.png'" style="width: 23rpx; height: 23rpx;" mode=""></image>
							<text class="c-aa fs-24 m-l-10">换一批</text>
						</view>
					</view>
					<view class="w-1 fr-s-s warp">
						<!-- @click="tolink(item.url)" -->
						<view class="fl-c" v-for="(item,index) in clist" @click="todetails(item)" :key="index"
							style="width: 25%; padding: 15rpx 5rpx;">
							<image :src="$dimg(item.image)" class="br-15" style="width: 96rpx; height: 96rpx;"
								mode="aspectFill"></image>
							<!-- <image :src="$dimg(item.image)" class="br-15" style="width: 96rpx; height: 96rpx;" mode="aspectFill"></image> -->
							<!-- <text class="m-t-20 text-line-1 c-00 fs-28">{{item.title}}</text> -->
							<text class="m-t-10 text-line-1 c-00 fs-28">{{item.title}}</text>
						</view>
					</view>
					<view style="height: 15rpx;"></view>
				</view>

				<text class="w-1 p-r-30 c-00 fs-32 bold m-t-40">热门推荐</text>
				<!-- <view style="width: 688rpx; height: 520rpx;" class="m-t-20 fr-b-s">
					<image @click="toDetail('变配电站巡检')" :src="$path + '/tab1/l.png'" class="br-20"
						style="clear: right; width: 334rpx; height: 520rpx;" mode=""></image>
					<view class="fl-b-s h-1">
						<image @click="toDetail('车辆识别系统')" :src="$path + '/tab1/r1.png'" class="br-20"
							style="width: 334rpx; height: 160rpx;" mode=""></image>
						<image @click="toDetail('人脸识别系统')" :src="$path + '/tab1/r2.png'" class="br-20"
							style="width: 334rpx; height: 160rpx;" mode=""></image>
						<image @click="toDetail('火灾探测器')" :src="$path + '/tab1/r3.png'" class="br-20"
							style="width: 334rpx; height: 160rpx;" mode=""></image>
					</view>
				</view> -->
				<view style="width: 688rpx; height: 420rpx;" class="m-t-20 fr-b-s" v-if="tlist.length>0">
					<view class="" style="clear: right; width: 334rpx; height: 420rpx;position: relative;">
						<image @click="todetails(tlist[0])" v-if="tlist.length>0" :src="$dimg(tlist[0].attachfile[0])"
							class="br-20" style="width: 334rpx; height: 420rpx;" mode="aspectFill"></image>
						<view class="pic-box br-20" style="height: 20%;font-size: 26rpx;">
							{{tlist[0].title || '--'}}
						</view>
					</view>
					<view class="fl-b-s h-1">

						<view class="" style="clear: right; width: 334rpx; height: 200rpx;position: relative;">
							<image @click="todetails(tlist[1])" v-if="tlist.length>1"
								:src="$dimg(tlist[1].attachfile[0])" class="br-20"
								style="width: 334rpx; height: 200rpx;" mode="aspectFill"></image>
							<view class="pic-box br-20" style="height: 40%;font-size: 26rpx;">

								{{tlist[1].title || '--'}}
							</view>
						</view>
						<view class="" style="clear: right; width: 334rpx; height: 200rpx;position: relative;">
							<image @click="todetails(tlist[2])" v-if="tlist.length>2"
								:src="$dimg(tlist[2].attachfile[0])" class="br-20"
								style="width: 334rpx; height: 200rpx;" mode="aspectFill"></image>
							<view class="pic-box br-20" style="height: 40%;font-size: 26rpx;">
								{{tlist[2].title || '--'}}
							</view>
						</view>
					</view>
				</view>
				<view class="m-t-35"></view>
				<block v-for="(item,index) in tlist" :key="index">
					<!--  -->
					<view class="wbox m-b-20  p-20" v-if="index>2" @click="todetails(item)"
						style="display: flex;position: relative;">
						<image :src="$dimg(item.attachfile[0])" class="br-20" mode="aspectFill"
							style="width: 200rpx;height: 200rpx;margin-right: 20rpx;"></image>
						<view class="" style="display: flex;flex-direction: column;height: 200rpx;">
							<view class="c-00 fs-32 bold">{{item.title}}</view>
							<view class="c-aa fs-24" style="flex: 1;margin-top: 20rpx;">已服务{{item.nums}}次</view>
							<view class="c-price bold">
								<text class="fs-28">￥</text>
								<text class="fs-36">{{item.price}}</text>
								<text class="fs-24">起</text>
							</view>
						</view>
						<image src="https://dg.fuliaoxx.com/imgs/tip.png" mode=""
							style="position: absolute;right: 0;top: 0;width: 120rpx;height: 120rpx;">
						</image>
						<view class="orderbtn c-ff fs-22 fr-c"
							style="position: absolute;right: 30rpx;bottom: 30rpx;background-color: rgb(255, 127, 15);">
							立即下单
						</view>
						<!-- <view class="w-1 fr-b-c m-t-20">
							<text class="c-00 fs-32 bold">{{item.title}}</text>
							<text class="c-aa fs-24">已服务{{item.nums}}次</text>
						</view>
						<view class="w-1 fr-b-c m-t-20">
							<view class="c-price bold ">
								<text class="fs-28">￥</text>
								<text class="fs-36">{{item.price}}</text>
								<text class="fs-24">起</text>
							</view>
							<view class="orderbtn c-ff fs-22 fr-c">立即下单</view>
						</view> -->
					</view>
				</block>

			</view>
		</view>


		<view class="" v-if="nowid==2">
			<index ref="sindex"></index>
		</view>




		<up-tabbar :value="tindex" @change="changeTabindex" activeColor="#01796D" inactiveColor="#A4A4A4">
			<up-tabbar-item text="首页">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1.png`">
					</image>
				</template>
			</up-tabbar-item>
			<up-tabbar-item :text="nowid==1?'服务':'接单大厅'" :badge="nowid==1?null:num">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2s.png':'/static/images/tabbar/t3s.png'"></image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2.png':'/static/images/tabbar/t3.png'"></image>
				</template>
			</up-tabbar-item>
			<!-- 			<up-tabbar-item v-if="nowid==1" text="订单">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3.png`">
					</image>
				</template>
			</up-tabbar-item> -->
			<up-tabbar-item text="我的">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4.png`">
					</image>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script setup>
	uni.hideTabBar()
	const tindex = ref(0)
	const changeTabindex = val => {
		console.log(val)
		let arr = nowid.value == 1 ? ['/pages/index/index', '/pages/Classify/Classify',
			'/pages/User/User'
		] : ['/pages/index/index', '/pages/Order/Order', '/pages/User/User'];
		uni.switchTab({
			url: arr[val]
		})
	}
	import index from '@/pages/seconds/index.vue'

	import {
		storeToRefs
	} from 'pinia';
	import useUserStore from '@/stores/user.js';

	const {
		nowid
	} = storeToRefs(useUserStore())
	// const {getnum} = useUserStore()



	const banners = ref([])

	const sindex = ref(null)

	onShareAppMessage(() => {})
	const selectedCity = ref("")
	const selectedProvince = ref("")
	onLoad(() => {

		if (nowid.value == 1) {
			getbanners()
			getclist()
			gettj()
		}
	})
	onPullDownRefresh(() => {
		if (nowid.value == 1) {
			getbanners()
			getclist()
			reget()
		}

	})
	// 轮播图
	function getbanners() {
		uni.$post({
			url: '/api/index/operactivity'
		}).then(res => {
			if (res.data.length) {
				res.data.map(i => i.image = uni.$dimg(i.image))
			}
			banners.value = res.data;
		})
	}

	function clickBannr(e) {
		const id = banners.value[e].url;
		console.log(id)
		uni.navigateTo({
			url: "/pages/index/Detail?id=" + id
		})
	}

	// 分类列表
	const clist = ref([])

	function getclist() {
		uni.$post({
			url: '/api/goods/swgoodslst',
			data: {
				inuse: 1,
				page: 1
			}
		}).then(res => {
			clist.value = res.data;
		})
	}


	onReachBottom(() => {
		if (nowid.value == 1) {
			if (loadmore.value) {
				page.value++;
				gettj()
			}
		}

	})

	const tlist = ref([])
	const page = ref(1);
	const nodata = ref(false);
	const loadmore = ref(true);

	onShow(() => {
		if (nowid.value == 1) {} else {
			if (uni.getStorageSync("city")) {
				selectedCity.value = uni.getStorageSync("city");
				selectedProvince.value = uni.getStorageSync("selectedProvince");
			} else {
				selectedCity.value = {

				}
				selectedProvince.value = {

				}
			}
			let para = {
				type: 1,
				page: 1,
				pageSize: 200,
				city: selectedCity.value.name || undefined
			}
			if (!selectedCity.value.name) {
				delete para.city
			}
			uni.$get({
				url: '/api/Ordersystem/Takingorders',
				data: para
			}).then(res => {
				num.value = res.data.length;
			})
		}
	})
	const num = ref(0);

	function gettj() {
		uni.$post({
			url: '/api/goods/swgoodslst',
			data: {
				page: page.value,
				type: -1
			},
			loading: false
		}).then(res => {
			if (page.value == 1) tlist.value = [];
			tlist.value = [...tlist.value, ...res.data];
			nodata.value = !tlist.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			tlist.value = [];
			nodata.value = !tlist.value.length;
			loadmore.value = true;
		})
	}

	function toDetail(str) {
		const id = tlist.value.find(i => i.title == str).id;
		uni.navigateTo({
			url: './Detail?id=' + id
		})
	}

	function todetails(item) {
		uni.navigateTo({
			url: './Detail?id=' + item.id
		})
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.sbox {
		width: 686rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}

	.wbox {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

	}


	.orderbtn {
		width: 144rpx;
		height: 52rpx;
		background: #01796D;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}
</style>
<style scoped lang="scss">
	.pic-box {
		position: absolute;
		width: 100%;
		height: 30%;
		bottom: 0;
		left: 0;
		background: linear-gradient(to top, #007674, #007674, rgba(1, 1, 1, 0));
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		// border-radius: 30rpx;
	}

	.top-bg {
		height: 440rpx;
		background: linear-gradient(to bottom, #007674, #007674, #f1f5f6);
	}
</style>